<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotateTriangle</title>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #333333"></canvas>
</body>
<script type="module">
    import {createProgram,createShader} from './utils.js';

    // function main() {
        let angle = 12;
        const vSource = `
            // x' = x cosb - y sinb
            // y' = x sinb + y cosb

            uniform float u_CosB, u_SinB;
            attribute vec4 a_position;
            void main(){
                gl_Position.x = a_position.x * u_CosB - a_position.y * u_SinB;
                gl_Position.y = a_position.x * u_SinB + a_position.y * u_CosB;
                gl_Position.z = a_position.z;
                gl_Position.w = 1.0;
                // gl_Position = a_position;
            }
        `;

        const fSource = `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        const canvas = document.querySelector('canvas');
        const gl = canvas.getContext('webgl');

        const vShader = createShader(gl,gl.VERTEX_SHADER,vSource);
        const fShader = createShader(gl,gl.FRAGMENT_SHADER,fSource);
        const program = createProgram(gl,vShader,fShader);
        gl.useProgram(program)

        const a_position = gl.getAttribLocation(program,'a_position');
        const vertexs = new Float32Array([
            0.0,0.5,
            -0.5,-0.5,
            0.5,-0.5
        ]);
        const glBuffer = gl.createBuffer(); // 创建缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER,glBuffer) // 绑定缓冲区对象
        gl.bufferData(gl.ARRAY_BUFFER,vertexs,gl.STATIC_DRAW) // 将数据写入缓冲区对象中
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0) // 将缓冲区对象分配给一个attribute变量
        gl.enableVertexAttribArray(a_position) // 开启attribute变量

        // const radian = angle * Math.PI / 180;
        // const sinb = Math.sin(radian);
        // const cosb = Math.cos(radian);
        const u_SinB = gl.getUniformLocation(program,'u_SinB');
        const u_CosB = gl.getUniformLocation(program,'u_CosB');
        // gl.uniform1f(u_SinB,sinb);
        // gl.uniform1f(u_CosB,cosb);
        //
        // gl.clearColor(0.0, 0.0, 0.0, 1.0)
        // gl.clear(gl.COLOR_BUFFER_BIT)
        // gl.drawArrays(gl.TRIANGLES,0,3)

        function animate(){
            angle += 1;
            const radian = angle * Math.PI / 180;
            const sinb = Math.sin(radian);
            const cosb = Math.cos(radian);
            // const u_SinB = gl.getUniformLocation(program,'u_SinB');
            // const u_CosB = gl.getUniformLocation(program,'u_CosB');
            gl.uniform1f(u_SinB,sinb);
            gl.uniform1f(u_CosB,cosb);

            gl.clearColor(0.0, 0.0, 0.0, 1.0)
            gl.clear(gl.COLOR_BUFFER_BIT)
            gl.drawArrays(gl.TRIANGLES,0,3)
            // requestAnimationFrame(animate)
        }
        animate()

    // }
    // main()



</script>
</html>